<template>
  <draggable
      v-model="arr"
      group="people"
      v-bind="dragOptions"
      item-key="id">
    <template #item="{element}">
      <div class="draggableItem">{{element.name}}</div>
    </template>
  </draggable>
</template>

<script>
export default {
  name: "vueDraggable"
}
</script>
<script setup>
import {ref} from 'vue'
import draggable from 'vuedraggable'
const arr = ref([
  {name:'古玩花卉',id:1},
  {name:'工艺品',id:2},
  {name:'海鲜T灯',id:3},
  {name:'啦啦啦啦',id:4},
  {name:'花鸟虫鱼',id:5},
])
const dragOptions = {
  animation: 200,
  group: "description",
  disabled: false,
  ghostClass: "ghost"
}
</script>
<style scoped lang="scss">
.draggableItem{
  cursor: pointer;
}
</style>